<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <meta charset="UTF-8">
    <base href="http://localhost:8080/fan/">
    <link rel="icon" href="https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/logo/minilogo.png">
    <script src="js/jquery.js"></script>
    <script src="js/details/lottie.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/details/details_product.css">
    <link rel="stylesheet" href="css/details/details_bottom.css">
    <link rel="stylesheet" href="css/details/details_header.css">
    <style>
        body {
            background-color: #fff;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="top-nav ">
        <div class="layui-main top-main layui-row">
            <div class="layui-col-xs4">
                <span>&nbsp</span>
            </div>
            <div class="layui-col-xs4">
                <span>&nbsp</span>
            </div>
            <div class="layui-col-xs4">
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item"><a href="customer/user_details" class="title"
                                                  th:text="${cusName}">登录/注册</a></li>
                    <li class="layui-nav-item"><a href="#" class="title">帮助中心</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" class="title">我的饭团</a>
                        <dl class="layui-nav-child"> <!-- 二级菜单 -->
                            <dd><a href="customer/getAllOrder?status=3&pageNum=1">订单中心</a></dd>
                            <dd><a href="customer/getAllCoupon?status=1&pageNum=1">我的优惠券</a></dd>
                            <dd><a href="#">我的收藏</a></dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="layui-row header-tip">
        <!--      logo      -->
        <div class="layui-col-xs3 logo-input">
            <a href="shop/shopsift/1" title="饭团网" class="logo-img">
                <img src="https://zhangxu-1023.oss-cn-nanjing.aliyuncs.com/images/logo/mylogo.png" width="200"
                     height="72">
            </a>
        </div>
        <!--    搜索    -->
        <div class="layui-col-xs6 search-box">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item searchbox-input">
                    <div class="layui-input-block" style="margin-left: 10px">
                        <input style="border: 2px solid rgb(255,107,55);width: 80%;display: block;float: left"
                               type="text" name="title" autocomplete="off"
                               placeholder="点此进入美食猩球" class="layui-input" id="es_input">
                        <div class="layui-btn-container" style="display: block;float: left">
                            <button type="button"
                                    class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger search-btn"
                                    id="es_btn">去觅食
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-main main">
    <!--头-->
    <div class="layui-row detail-shop-dish">
    </div>
    <div class="layui-row container-shop-dish">
        <!--   商品详情     -->
        <div class="layui-col-xs9 ">
            <!--    详情head      -->
            <div class="dish-details">
                <div class="dish-pictures-area">
                    <!--    详情bigImg     -->
                    <div class="picture-preview">
                        <div class="layui-carousel" id="test9">
                            <div carousel-item>
                                <div><img th:src="${food.foodMainImg}" width="100%" height="100%"></div>
                                <div><img th:src="${food.foodMainImg}" width="100%" height="100%"></div>
                                <div><img th:src="${food.foodMainImg}" width="100%" height="100%"></div>
                            </div>
                        </div>
                    </div>
                    <!--    详情ImgList     -->
                    <div class="picture-list">

                    </div>
                    <!--    商品详细信息     -->
                    <div class="dish-info-area">
                        <!--商品名-->
                        <div class="dish-name">
                            <span id="dish-name" th:text="${food.foodName}"></span>
                            <input type="hidden" class="shop-score" th:value="${shop.shopScore}">
                            <div class="sum-people">
                                <span class="people-count">1120</span>
                                <span>人推荐</span>
                            </div>
                        </div>
                        <!--  商品价格   -->
                        <div class="dish-price">
                            ￥
                            <span id="dish-price" th:text="${food.foodPrice}"></span>
                            <span id="text-price">店铺价格:<del>168</del></span>
                        </div>
                        <!--       购买按钮        -->
                        <form action="getOrderDetails" method="get">
                            <div class="layui-btn-container but-btn">
                                <input type="hidden" name="foodId" th:value="${food.foodId}">
                                <input type="hidden" name="shopId" th:value="${shop.shopId}">
                                <input style="float: left" type="submit" value="点此购入"
                                       class="layui-btn layui-btn-primary layui-btn-radius mybtn buy_btn">点此购入
                                </input>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
                 style="border-bottom: 2px solid #f4f4f4">
                <ul class="layui-tab-title">
                    <li class="layui-this">美食详情</li>
                    <li>备注信息</li>
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item layui-show" th:text="${food.foodDetail}">原材料:虾仁</div>
                    <div class="layui-tab-item">
                        1.自购买起48小时内使用<br>
                        2.请留意手机短信息根据提示完成到店消费
                    </div>
                </div>
            </div>
            <!--       评价容器     -->
            <div class="dish-comment-wrap">
                <!--       评价header     -->
                <div class="dish-comment-head">
                    <span id="anchor">相关评价</span>
                </div>
                <!--       评价list     -->
                <div class="dish-comment-list">
                    <input type="hidden" class="total" th:value="${evaMap.total}">
                    <input type="hidden" class="curr" th:value="${evaMap.curr}">
                    <ul>
                        <li th:each="e: ${evaMap.evaluationVoList}" class="comment">
                            <div class="layui-row ">
                                <!--      用户容器       -->
                                <div class="layui-col-xs1 user-tip">
                                    <!--      用户头像       -->
                                    <img th:src="${e.cusHeadImgPath}" width="48px" height="48px">
                                    <!--      用户名       -->
                                    <span th:text="${e.cusName}" class="user-name">用户名1</span>
                                </div>
                                <div class="layui-col-xs11 comment-details">
                                    <div class="layui-card">
                                        <div class="layui-card-header" style="background-color: #f4f4f4">
                                            <strong class="score-text">评分:</strong>
                                            <div class="score-item">
                                                <div class="score" th:text="${e.score}"></div>
                                            </div>
                                            <strong class="date-text">评论日期:</strong>
                                            <div class="date" th:text="${e.createDate}"></div>
                                        </div>
                                        <div th:text="${e.evaContent}" class="layui-card-body comment-details-text">
                                        </div>
                                    </div>
                                    <!--评价图片-->
                                    <div class="shop-pictures">
                                        <ul>
                                            <li th:each="img: ${e.evaImgList}" class="comment-img-item">
                                                <img th:src="${img.evaImgPath}" alt="" width="68" height="68">
                                            </li>
                                        </ul>
                                    </div>
<!--                                    <div class="comment-details-date">-->
<!--                                        <div class="comment-perfect">-->
<!--                                            <i class="perfect-img"></i>-->
<!--                                            <span>赞</span>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                            </div>

                        </li>
                    </ul>
                </div>
                <!--    分页    -->
                <div class="layui-row">
                    <div class="layui-col-xs3">
                        &nbsp
                    </div>
                    <div class="layui-col-xs8">
                        <div id="pages"></div>
                    </div>
                    <div class="layui-col-xs1">
                        &nbsp
                    </div>
                </div>
            </div>
        </div>
        <!--    右边    -->
        <div class="layui-col-xs3 aside-shop-dish">
            <!--    店铺信息     -->
            <div class="shop-info-wrap">
                <div class="layui-card shop-info-tip">
                    <div class="layui-card-header shop-info-head">
                        <a th:href="'shop/'+${shop.shopId}" class="shop-info-head-name"
                           th:text="${shop.shopName}">张家面馆</a>
                        <div class="grade-item">
                            <div class="grade-tip"></div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="people-one-price" style="width: 100%;float: top">
                            <span>人均</span>
                            <i>￥</i>
                            <span id="people-one-price" th:text="${shop.shopAvgCost}">75</span>
                        </div>
                        <div style="height: 20%;margin-bottom: 5px;margin-top: 5px;float: top">
                            <strong>地址:</strong>
                            <span th:text="${shop.shopProvince}">苏州工业园区东方文荟苑三区</span>
                            <span th:text="${shop.shopCity}">苏州工业园区东方文荟苑三区</span>
                            <span th:text="${shop.shopArea}">苏州工业园区东方文荟苑三区</span>
                            <span th:text="${shop.shopStreet}">苏州工业园区东方文荟苑三区</span>
                        </div>
                        <div style="height: 20%;float: top">
                            <strong>电话:</strong>
                            <span th:text="${shop.shopTelno}">13888888888</span>
                        </div>

                    </div>
                </div>
            </div>
            <div class="recommend-text">
                <span>店铺热销</span>
                <i class="hot-img"></i>
            </div>
            <!--    热销商品     -->
            <div class="recommend-dish">
                <ul>
                    <li th:each="dish:${recommend}">
                        <div class="recommend-dish-item">
                            <div class="layui-panel">
                                <div style="padding: 20px 30px;">
                                    <div class="dish-item-img">
                                        <a href="javascript:;">
                                            <img th:src="${dish.foodMainImg}" alt="" width="120px" height="120px">
                                        </a>
                                    </div>
                                    <div class="dish-item-name">
                                        <span th:text="${dish.foodName}">刘家虾仁之苏州分仁</span>
                                    </div>
                                    <div class="dish-item-price">
                                        <i>饭团价:￥</i>
                                        <span th:text="${dish.foodPrice}">112</span>
                                        <div class="dish-item-before">
                                            <i>原价</i>
                                            <span><del th:text="${dish.foodPrice} + 18 ">168</del></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <ul id="demo">
    </ul>
<!--    <div class="layui-row">-->
<!--        <div class="layui-edge-bottom detail-bottom">-->
<!--            <div class="layui-col-xs2">-->
<!--                关于饭团-->
<!--            </div>-->
<!--            <div class="layui-col-xs2">-->
<!--                加入我们-->
<!--            </div>-->
<!--            <div class="layui-col-xs2">-->
<!--                商家入驻-->
<!--            </div>-->
<!--            <div class="layui-col-xs2">-->
<!--                帮助中心-->
<!--            </div>-->
<!--            <div class="layui-col-xs2">-->
<!--                手机APP-->
<!--            </div>-->
<!--            <div class="layui-col-xs2">-->
<!--                <a href="javascript:;" title="@张旭 @刘海萍 @刘丽 @商建">@作者</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>


<iframe align="center" width="100%" height="560px" src="details/details_bottom.html"
        frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>

<script src="layui/layui.js"></script>
<script src="js/details/details_product.js"></script>
<script src="js/elasticsearch_util.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test9'
            , width: '220px' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , height: '220px'
        });
    });
</script>
</body>
</html>